<template>
  <!--  桌面端顶部导航  -->
  <nav v-if="isDesktop" class="nav-desktop">
    <a href="/"><img v-if="showBrowseLink" class="logo" src="../assets/image/logo_urbanplate.svg" alt=""></a>
    <div v-if="showBrowseLink" class="nav-left">
      <a href="/" class="nav-line">Browse All Recipes</a>
    </div>
    <div class="nav-right">
      <a href="/the-pantry" class="nav-line" :class="{ active: isActive('pantry') }">The pantry</a>
      <a href="/about" class="nav-line" :class="{ active: isActive('about') }">About</a>
      <a href="https://apps.microsoft.com/"><img src="../assets/image/icon_instagram.svg" alt=""></a>
    </div>
  </nav>
  <!--  移动端手机导航  -->
  <nav v-else class="nav-mobile">
    <div class="nav-content">
      <img v-if="showBrowseLink" src="../assets/image/logo_urbanplate.svg" alt="">
      <span v-if="showBrowseLink">Browse All Recipes</span>
      <button @click="toggleMenu" class="menu-button">☰</button>
    </div>
    <div v-if="menuOpen" class="overlay" :class="{ show: menuOpen }">
      <div class="overlay-content" :class="{ show: menuOpen }">
        <span @click="toggleMenu" class="close-button">✖</span>
        <ul>
          <li><a href="/">Browse All Recipes</a></li>
          <li><a href="/the-pantry">The Pantry</a></li>
          <li><a href="/about">About Urban Plate</a></li>
          <li><a href="/legal">Terms & Legal</a></li>
          <li><a href="https://apps.microsoft.com/">Instagram</a></li>
          <li><a href="mailto:corey@ginnivan.net?subject=Hey%20Corey%20%F0%9F%91%8B">Contact Us</a></li>
        </ul>
      </div>
    </div>
  </nav>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { useRoute } from 'vue-router'

// 获取当前路由
const route = useRoute()

// 根据当前路由确定是否显示 "Browse All Recipes" 链接
const showBrowseLink = route.name !== 'home'

// 函数检查链接是否为当前活动链接
const isActive = (routeName: string) => {
  return route.name === routeName
}

// 移动端遮罩层
const menuOpen = ref(false)
const toggleMenu = () => {
  menuOpen.value = !menuOpen.value
  const overlay = document.querySelector('.overlay')
  const overlayContent = document.querySelector('.overlay-content')

  if (menuOpen.value) {
    setTimeout(() => {
      overlay?.classList.add('show')
      overlayContent?.classList.add('show')
    }, 0)
  } else {
    overlay?.classList.remove('show')
    overlayContent?.classList.remove('show')
  }
}

// 响应式判断是否为桌面端
const isDesktop = ref(window.innerWidth > 1200)

// 处理窗口尺寸变化
const handleResize = () => {
  isDesktop.value = window.innerWidth > 1200
}

// 生命周期钩子
onMounted(() => {
  window.addEventListener('resize', handleResize)
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize)
})
</script>

<style scoped lang="scss">
// 桌面端导航
.nav-desktop {
  margin: 0 auto;
  display: flex;
  align-items: center;
  padding: 16px 100px;
  background-color: transparent;
  position: relative;

  .logo {
    width: 120px;
    position: absolute;
    top: 120%;
    left: 10%;
    transform: translate(-50%, -50%);
    transition: transform 0.3s;

    &:hover {
      transform: translate(-50%, -50%) rotate(-15deg);
    }
  }

  .nav-left {
    margin-left: 120px;
  }

  .nav-right {
    margin-left: auto;
    display: flex;
    align-items: center;
  }

  .nav-line {
    font-size: 14px;
    line-height: 20px; // 设置行高以提高对齐
    position: relative; // 使下划线相对定位
    text-decoration: none;
    color: #000000;
    margin: 0 1rem;
    transition: color 0.3s;

    &.active::after {
      content: '';
      position: absolute;
      left: 50%;
      bottom: -4px; // 调整下划线位置（适当降低）
      width: 100%; // 鼠标悬停时展开下划线
      height: 2px; // 下划线高度
      background-color: #000000; // 下划线颜色
      transform: translateX(-50%);
      transition: width 0.3s ease, left 0.3s ease;
    }

    &::after {
      content: '';
      position: absolute;
      left: 50%;
      bottom: -4px; // 调整下划线位置（适当降低）
      width: 0;
      height: 2px; // 下划线高度
      background-color: #000000; // 下划线颜色
      transform: translateX(-50%); // 使下划线居中
      transition: width 0.3s ease, left 0.3s ease;
    }

    &:hover {
      color: #000000; // 鼠标悬停时的文字颜色

      &::after {
        width: 100%; // 鼠标悬停时展开下划线
        left: 50%; // 保持居中
      }
    }
  }

  .nav-right img {
    width: 20px;
    height: 20px;
    margin-left: 0.5rem; // 图片和文字间距
    margin-top: 2px; // 调整图标垂直位置
    transition: transform 0.3s;
    z-index: 999;
  }

  .nav-right img:hover {
    transform: scale(0.9);
  }
}

// 移动端导航
.nav-mobile {
  display: flex;
  justify-content: end;
  align-items: center;
  padding: 16px;
  background-color: transparent;

  .nav-content {
    display: flex;
    align-items: center;
    position: relative;

    img{
      width: 100px;
      position: absolute;
      top: 100%;
      left: -80%;
      transform: translate(-50%, -50%);
    }
  }

  .menu-button {
    background: none;
    border: none;
    font-size: 24px; // 按钮大小
    cursor: pointer;
    margin-left: 10px;
  }

  .overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0); // 初始为完全透明
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    transition: background-color 0.5s ease; // 背景颜色的过渡
    pointer-events: none; // 不可点击

    &.show {
      background-color: rgba(0, 0, 0, 0.8); // 显示时为深色
      pointer-events: auto; // 可点击
    }
  }

  .overlay-content {
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: #000000;
    transform: translateY(100%); // 初始位置在下方
    transition: transform 0.5s ease;

    &.show {
      transform: translateY(0); // 显示时恢复位置
    }

    .close-button {
      font-size: 50px;
      color: #fff;
      position: absolute;
      top: 8%;
      left: 90%;
      transform: translate(-50%, -50%);
    }

    ul {
      list-style: none;
      padding: 30px;
      text-align: left;

      li {
        margin: 30px 0;

        a {
          font-size: 28px;
          font-weight: 600;
          text-decoration: none;
          color: #ffffff;
        }
      }
    }
  }
}
</style>
